<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据具体坐标生成Graphic</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/api47/arcgis_js_api/library/4.7/dijit/themes/claro/claro.css" />
	  <link rel="stylesheet" href="http://localhost:8080/api47/arcgis_js_api/library/4.7/esri/css/main.css" />
  	<script src="http://localhost/api47/arcgis_js_api/library/4.7/dojo/dojo.js"></script>
    <style>
        .MapClass{
            width:100%;
            height:500px;
            border:1px solid #000;
        }
    </style>
    <script>
        require([
          "esri/Map",
          "esri/Basemap",
          "esri/views/MapView",
          "esri/layers/GraphicsLayer",
          "dojo/on",
          "dojo/query",
          "dojo/colors",
          "esri/Graphic",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/geometry/Point",
          "esri/geometry/Polyline",
          "esri/geometry/Polygon",
          "esri/geometry/Circle",
          "dojo/domReady!"],
          function(
            Map,
            Basemap,
            MapView,
            GraphicsLayer,on,query,Color,Graphic,
            SimpleMarkerSymbol,SimpleLineSymbol,
            SimpleFillSymbol,
            Point,
            Polyline,
            Polygon,
            Circle
          ){
            var map = new Map({
              basemap: 'streets'
            });
               //创建客户端图层
            var graphicsLayer=new GraphicsLayer();
              //将客户端图层添加到地图中
            map.add(graphicsLayer, 1);

            view = new MapView ({
              container: "viewDiv",
              map: map,
              center: [114.21868761726246, 30.584733852070247],
              zoom: 15
            })
            
         
           
            //通过query查询到button对象
            var btns=query("button");
            // view.on("click", function(event) {
            //   // event.stopPropagation();
            //   //获取点击坐标event.mapPoint.x/ event.mapPoint.y
            //   console.log(event.mapPoint)
            // })
            on(btns,"click",function(event){
              console.log(event)
                //获得按钮的文本
                var text=this.innerHTML;
                //定义线符号
                var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //定义点符号l
                var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
                //定义面符号
                var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new Color([255, 0, 0]));
                //声明一个类型和图形
                var geometry;
                var graphic;
                //根据文本定义相应的geometry
                switch(text)
                {
                    case "添加点":
                        geometry=new Point({
                            "x":114.21857340313417,
                            "y":30.584641053091016,
                            "spatialReference":map.spatialReference
                        });
                        graphic=new Graphic(geometry,pSymbol);
                        graphic.attributes = {
                          "name": "point"
                        }
                        break;
                    case "添加线":
                        //点的坐标对
                         var  paths=[];
                         paths[0]=[
                            [114.21857340313417, 30.584641053091016],
                            [114.22030089182438, 30.583463219893112],
                            [114.22109325233934, 30.58429841070621],
                            [114.22157866238454, 30.585033664156985],
                            [114.2228778480937, 30.58758920527724]
                        ];
                        geometry=new Polyline({
                            "paths":paths,
                            "spatialReference":map.spatialReference
                        })
                        graphic=new Graphic(geometry,lineSymbol);
                        graphic.attributes = {
                          "name": "polyline"
                        }
                        break;
                    case "添加面":
                        //点的坐标对
                        var ring=[];
                        ring[0]=[
                            [114.21857340313417, 30.584641053091016],
                            [114.22030089182438, 30.583463219893112],
                            [114.22109325233934, 30.58429841070621],
                            [114.22157866238454, 30.585033664156985],
                            [114.2228778480937, 30.58758920527724]
                        ];
                        geometry=new Polygon({
                            "rings":ring,
                            "spatialReference":map.spatialReference
                        });
                        graphic=new Graphic(geometry,fill);
                        graphic.attributes = {
                          "name": "polygon"
                        }
                        break;
                    case "添加圆":
                        //圆心
                        var p=new Point({
                            "x":114.21857340313417,
                            "y":30.584641053091016,
                            "spatialReference":map.spatialReference
                        });
                        //半径
                        var r=200;
                        geometry=new Circle(p,{
                            "radius":r
                        });
                        graphic=new Graphic(geometry,fill);
                        graphic.attributes = {
                          "name": "circle"
                        }
                        break;
                }
                //将图形添加到图层中
                graphicsLayer.add(graphic);
            })
           
           
        })
    </script>
</head>
<body>
    <div id="viewDiv" class="MapClass"></div>
    <button>添加点</button>
    <button>添加线</button>
    <button>添加面</button>
    <button>添加圆</button>
</body>
</html>